<html>
  <body>
    <pre id="diagram" class="mermaid">
graph TB
      a --> b
      a --> c
      b --> d
      c --> d
    </pre>

    <div id="d2"></div>

    <script type="module">
      import mermaid from '/mermaid.esm.mjs';
      mermaid.parseError = function (err, hash) {
        // console.error('Mermaid error: ', err);
      };
      mermaid.initialize({
        // theme: 'forest',
        startOnLoad: true,
        logLevel: 0,
        flowchart: {
          // defaultRenderer: 'elk',
          useMaxWidth: false,
          htmlLabels: true,
        },
        gantt: {
          useMaxWidth: false,
        },
        useMaxWidth: false,
      });
      function callback() {
        alert('It worked');
      }
      mermaid.parseError = function (err, hash) {
        console.error('In parse error:');
        console.error(err);
      };
      const value = `graph TD\nHello --> World`;
      const el = document.getElementById('d2');
      const { svg } = await mermaid.render('d22', value);
      console.log(svg);
      el.innerHTML = svg;
    </script>
  </body>
</html>
